<!--
* @author wn
* @date 2024/03/18 11:37:33
* @description: 服务页
!-->
<template>
	<!-- 进度条 -->
	<view class="od-banner">
		<image
			src="/static/images/od_bg_icon.png"
			mode="widthFix"
			class="od-banner-icon"
		/>
		<view class="od-jd od-jd-0">
			<view class="od-jd-out">
				<view class="od-jd-in" :style="{ width: `${progressWidth}%` }"></view>
			</view>
			<view class="my-flex od-jd-text">
				<text class="od-jd-st-0">填写订单</text>
				<text class="od-jd-st-10">在线支付</text>
				<text class="od-jd-st-20">专人服务</text>
				<text class="od-jd-st-30">服务完成</text>
			</view>
		</view>
	</view>
	<!-- 订单服务详情 -->
	<view class="pub-box">
		<view class="pub-box-bd">
			<view class="weui-cell-hd">
				<image
					class="service-icon"
					:src="service.icon_image_url || '/static/images/avatar_def.png'"
					mode="widthFix"
				/>
			</view>
			<view class="weui-cell-hd my-view">
				<text class="service-name">{{ service.name }}</text>
			</view>
			<view class="weui-cell-ft">
				<view class="f5 ic_info" @tap="onServiceHandle">服务内容</view>
			</view>
		</view>
		<view class="pub-box-bd">
			<view class="weui-cell-hd">
				<image
					class="service-icon"
					:src="service.logo_image_url || '/static/images/avatar_def.png'"
					mode="widthFix"
				/>
			</view>
			<view class="weui-cell-hd my-view">
				<text class="service-name">小铜人</text>
				<text class="my-text my-text1">本次服务专员</text>
				<text class="my-text my-text2">[重新分配]</text>
			</view>
			<button size="mini" plain class="my-button">联系</button>
		</view>
	</view>
	<!-- 表单 -->
	<view class="pub-box form-box">
		<!-- 选择医院 -->
		<view class="form-item">
			<text class="weui-label">就诊医院</text>
			<picker
				:range="hospitals"
				range-key="name"
				:value="hospital_index"
				@change="onPickerHandle"
				class="my-picker"
			>
				<input
					type="text"
					disabled="true"
					placeholder="请选择要就诊的医院"
					placeholder-class="vp-placeholder"
					:value="hospitals[hospital_index]?.name"
				/>
			</picker>
			<image src="/static/images/ic_arrow.png" mode="widthFix"> </image>
		</view>
		<!-- 时间选择器 -->
		<view class="form-item">
			<text class="weui-label">就诊时间</text>
			<DatePicker
				:timestamp="form.starttime"
				placeholder="请选择就诊时间"
				@dtPickerChanged="onDtPickerHandle"
				class="my-picker"
			/>
			<image src="/static/images/ic_arrow.png" mode="widthFix"> </image>
		</view>
		<!-- 选择就诊人 -->
		<navigator class="form-item" url="/pages/client/client?action=select">
			<text class="weui-label">就诊人</text>
			<input
				type="text"
				class="my-picker"
				placeholder="请选择就诊人"
				placeholder-class="vp-placeholder"
				disabled
				:value="clientName"
			/>
			<image src="/static/images/ic_arrow.png" mode="widthFix"> </image>
		</navigator>
		<!-- 选择接送地址 -->
		<view class="form-item" @tap="AddressSelectedHandle">
			<text class="weui-label">接送地址</text>
			<input
				type="text"
				class="my-picker"
				placeholder="请选择就诊人所在地址"
				placeholder-class="vp-placeholder"
				disabled
				:value="
					form.address.userName
						? `${form.address.userName}(${form.address.cityName}${form.address.countyName}${form.address.detailInfo})`
						: ''
				"
			/>
			<image src="/static/images/ic_arrow.png" mode="widthFix"> </image>
		</view>
		<!-- 填写联系电话 -->
		<view class="form-item">
			<text class="weui-label">联系电话</text>
			<input
				type="text"
				class="my-picker"
				placeholder="请填写您的联系电话"
				placeholder-class="vp-placeholder"
				:value="telephone"
			/>
			<text class="hold-right"></text>
		</view>
	</view>
	<!-- 确认下单 -->
	<button
		class="sub-button"
		:style="{ bottom: safeAreaInsets?.bottom + 'px' }"
		@tap="submitHandle"
	>
		确认下单
	</button>
</template>
<script setup>
import { getServiceOrderApi } from '@/api/service'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref, toRaw } from 'vue'

// props 接收页面面参数
const { svid, hid } = defineProps({ svid: String, hid: String })

// 进度条长度
const progressWidth = ref(25)

onLoad(() => getServiceOrderData())

// 获取 订单服务详情数据
const service = ref({})
// 医院数据
const hospitals = ref([])
// 选中的医院索引
const hospital_index = ref(0)
// form data
const form = reactive({
	price: '',
	starttime: 0,
	address: {
		userName: '',
		cityName: '',
		countyName: '',
		detailInfo: '',
	},
})
const getServiceOrderData = async () => {
	const { service: s_data, hospitals: h_data } = await getServiceOrderApi(svid)
	service.value = s_data
	hospitals.value = h_data
	// 根据 hid 默认设置 hospital_index  找不到 -1
	const index = h_data.findIndex(v => v.id == hid)
	hospital_index.value = index
	form.price = h_data[index]?.service_price || ''
}

// 点击服务内容
const onServiceHandle = () => {}

// 选中医院事件
const onPickerHandle = e => {
	const { value } = e.detail
	hospital_index.value = value
	form.price = hospitals.value[value]?.service_price || ''
}

// 修改就医时间
const onDtPickerHandle = ({ detail }) => (form.starttime = detail.value)

// 选择选择服务人员
const clientName = ref('')

// 创建监听全局事件
uni.$on('clientChange', ({ name }) => (clientName.value = name))

// 选择地址
const AddressSelectedHandle = () =>
	uni.chooseAddress({
		success({ userName, cityName, countyName, detailInfo }) {
			form.address.userName = userName
			form.address.cityName = cityName
			form.address.countyName = countyName
			form.address.detailInfo = detailInfo
		},
		fail(res) {
			console.log(res)
		},
	})

// 联系电话
const telephone = ref('')

// 安全区域
const { safeAreaInsets } = uni.getSystemInfoSync()

// 点击下单按钮
const submitHandle = () => {
	/**
	 * 1 点击后没有 token 弹窗 填写手机号
	 * 获取短信验证码 -- 获取token -- 存储 token
	 * 2 有 token 无需弹窗
	 * 3 下单
	 */
}
</script>
<style lang="scss">
.weui-label {
	width: 140rpx;
}
.od-banner {
	position: relative;
	background: url()
		repeat;
}
.od-banner-icon {
	position: absolute;
	top: 30rpx;
	right: -20rpx;
	width: 130rpx;
	opacity: 0.6;
}
.od-jd {
	padding: 60rpx 40rpx;
}
.od-jd-out {
	height: 20rpx;
	line-height: 20rpx;
	border: 5rpx solid #ffffff;
	border-radius: 50rpx;
	background: #ffffff;
	.od-jd-in {
		height: 20rpx;
		border-radius: 50rpx;
		background: url()
			repeat-y;
	}
}
.my-flex {
	display: flex;
	justify-content: space-between;
	text-align: center;
	padding: 30rpx 30rpx 0;
}
.od-jd-text text {
	color: #ffffff;
	font-size: 26rpx;
	opacity: 0.7;
}

.od-jd-0 .od-jd-st-0 {
	opacity: 1;
	font-weight: bold;
}
.od-jd-10 .od-jd-in {
	width: 37%;
}
.od-jd-10 .od-jd-st-10 {
	opacity: 1;
	font-weight: bold;
}
.od-jd-20 .od-jd-in {
	width: 64%;
}
.od-jd-20 .od-jd-st-20 {
	opacity: 1;
	font-weight: bold;
}
.od-jd-30 .od-jd-in {
	width: 100%;
}
.od-jd-30 .od-jd-st-30 {
	opacity: 1;
	font-weight: bold;
}
.od-jd-40 .od-jd-in {
	width: 100%;
	background: #999999;
}

// 服务详情
.service-icon {
	display: block;
	width: 50rpx;
	height: 50rpx;
	margin: 15rpx 15rpx 15rpx 0;
}
.service-name {
	font-weight: bold;
}
.pub-box-tt {
	height: 80rpx;
	line-height: 80rpx;
	position: relative;
	padding-left: 10rpx;
}
.pub-box-tt text {
	font-size: 24rpx;
}
.pub-box-ttl {
	padding-left: 10rpx;
}
.pub-box-ttl text {
	color: #888888;
}
.pub-box-ttr {
	position: absolute;
	right: 10rpx;
	top: 0;
	height: 80rpx;
	line-height: 80rpx;
}
.pub-box-ttr text {
	color: #576b95;
}
.pub-box {
	position: relative;
	margin: -30rpx 20rpx 0;
	padding: 0 20rpx;
	background: #ffffff;
	border: 1rpx solid #eeeeee;
	border-radius: 10rpx;
	&.form-box {
		margin-top: 20rpx;
	}
}
.pub-box-bd {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	&:first-child {
		border-bottom: 1rpx solid #eeeeee;
	}
	.my-view {
		flex: 1;
	}
	.my-text {
		font-size: 24rpx;
	}
	.my-text1 {
		margin: 0 6rpx;
		color: #ccc;
	}
	.my-text2 {
		color: #1aad19;
	}
	.my-button {
		color: #1aad19;
		border-color: #1aad19;
	}
}
.form-item {
	display: flex;
	align-items: center;
	padding: 20rpx 0;
	font-size: 30rpx;
	font-weight: bold;
	border-bottom: 1rpx solid #eeeeee;
	&:last-child {
		border-bottom: none;
	}
	.my-picker {
		flex: 1;
		text-align: right;
	}
	image {
		width: 46rpx;
		height: 46px;
		margin-left: 2rpx;
	}
	.hold-right {
		width: 46rpx;
	}
}
.sub-button {
	position: fixed;
	left: 20rpx;
	right: 20rpx;
	height: 88rpx;
	line-height: 88rpx;
	color: #fff;
	font-weight: 700;
	background-color: #1aad19;
}
.pub-box-bd .weui-cell::before {
	left: 20rpx;
}

.xieyi {
	text-align: center;
	padding-bottom: 20rpx;
}
.xieyi text {
	font-size: 28rpx;
}
.xieyi navigator {
	font-size: 28rpx;
	display: inline-block;
	color: #0bb684;
}
.is_xieyi {
	display: inline-block;
	padding-left: 36rpx;
	background: url()
		no-repeat left center;
	background-size: 30rpx;
}
.is_xieyi_on {
	background-image: url();
}
.popup-content {
	width: 600rpx;
	height: 260rpx;
	padding: 20rpx;
}
.popup-content .group {
	margin: 20rpx;
	display: flex;
}
.popup-content .group input {
	padding-left: 10rpx;
	width: 100%;
	border-bottom: 2rpx solid #f5f5f5;
}
.popup-content .group .valid-text {
	width: 230rpx;
	text-align: center;
	line-height: 72rpx;
	font-size: 28rpx;
	color: #409eff;
}
.btns {
	display: flex;
	border-top: 2rpx solid #f5f5f5;
}
.btns view {
	flex: 1;
	text-align: center;
	height: 80rpx;
	line-height: 80rpx;
}
.btns .cancal {
	border-right: 2rpx solid #f5f5f5;
}
.btns .ok {
	color: #ee0a24;
}
.uni-popup__wrapper {
	border-radius: 20rpx;
}
.text-center {
	text-align: center;
	margin-top: 20rpx;
	margin-bottom: 20rpx;
}
.pay-box {
	padding: 40rpx;
}
.pay-box canvas {
	margin: 0 auto;
}
</style>
